<!--
 * @Author: anxia.ack anchenkai@come-future.com
 * @Date: 2025-03-22 16:10:10
 * @LastEditors: anxia.ack anchenkai@come-future.com
 * @LastEditTime: 2025-04-11 09:53:53
 * @FilePath: /free-learning-front/src/components/Footer.vue
-->
<template>
  <footer class="footer">
    <div class="footer-wave">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 80">
        <path
          fill="#333"
          fill-opacity="1"
          d="M0,32L80,37.3C160,43,320,53,480,53.3C640,53,800,43,960,42.7C1120,43,1280,53,1360,58.7L1440,64L1440,80L1360,80C1280,80,1120,80,960,80C800,80,640,80,480,80C320,80,160,80,80,80L0,80Z"
        ></path>
      </svg>
    </div>

    <div class="footer-content">
      <div class="footer-section about">
        <h3>关于我们</h3>
        <p>我们致力于为学习者提供优质的教育资源和学习平台，让每个人都能享受到优质的教育资源。</p>
        <div class="social-icons">
          <a href="#" class="social-icon"><i class="fab fa-weixin"></i></a>
          <a href="#" class="social-icon"><i class="fab fa-weibo"></i></a>
          <a href="#" class="social-icon"><i class="fab fa-qq"></i></a>
        </div>
      </div>

      <div class="footer-section links">
        <h3>快速链接</h3>
        <div class="quick-links">
          <router-link
            v-for="(link, index) in quickLinks"
            :key="index"
            :to="link.path"
            class="link-item"
          >
            {{ link.title }}
          </router-link>
        </div>
      </div>

      <div class="footer-section contact">
        <h3>联系我们</h3>
        <p><i class="fas fa-envelope"></i> contact@example.com</p>
        <p><i class="fas fa-phone"></i> 400-123-4567</p>
      </div>
    </div>

    <div class="copyright">
      <p>© {{ new Date().getFullYear() }} 免费学习平台. 保留所有权利</p>
      <a href="http://beian.miit.gov.cn/" target="_blank" style="margin-left: 10px;"
        >陕ICP备2025060550号-1</a
      >
    </div>
  </footer>
</template>

<script setup lang="ts">
import { ref } from "vue";

const quickLinks = ref([
  { title: "首页", path: "/" },
  { title: "课程", path: "/courses" },
  { title: "教师", path: "/teachers" },
  { title: "咨询", path: "/consultation" },
  { title: "关于", path: "/about" },
]);
</script>

<style scoped>
.footer {
  background: #333;
  color: #fff;
  position: relative;
  padding-top: 0;
  margin-top: 40px;
  width: 100%;
  z-index: 1;
}

.footer-wave {
  position: absolute;
  top: -40px;
  left: 0;
  width: 100%;
  height: 40px;
  overflow: hidden;
  line-height: 0;
  z-index: 2;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 20px 5%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

.footer-section {
  flex: 1;
  padding: 0 15px;
  min-width: 200px;
  margin-bottom: 15px;
}

.footer-section h3 {
  position: relative;
  color: #fff;
  font-size: 1.1rem;
  margin-bottom: 12px;
  padding-bottom: 6px;
}

.footer-section h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30px;
  height: 2px;
  background: #007bff;
}

.footer-section p {
  color: #ccc;
  line-height: 1.4;
  font-size: 0.85rem;
  margin: 0 0 8px;
}

.social-icons {
  display: flex;
  margin-top: 10px;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  margin-right: 8px;
  text-decoration: none;
  transition: all 0.3s;
}

.social-icon:hover {
  background: #007bff;
}

.quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.link-item {
  color: #ccc;
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.3s;
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 8px;
  border-radius: 3px;
}

.link-item:hover {
  color: #fff;
  background: rgba(0, 123, 255, 0.2);
}

.contact-info i {
  color: #007bff;
  width: 16px;
  margin-right: 8px;
}

.copyright {
  background: #222;
  text-align: center;
  padding: 8px 0;
  color: #999;
  font-size: 0.8rem;
  display: flex;
  justify-content: center;
  width: 100%;
  position: relative;
  z-index: 3;
}

@media (max-width: 768px) {
  .footer-content {
    padding: 15px 5%;
  }

  .footer-section {
    margin-bottom: 10px;
    min-width: 100%;
  }

  .social-icons {
    margin-bottom: 10px;
  }
}
</style> 